<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>玉灵 QQ:7031633 Email:webrx@126.com</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            overflow: hidden;
            width: 300px;
            height: 200px;
            background-color: #f00;

            /*overflow: hidden;*/
            /*overflow: auto;*/
            /*word-wrap: break-word;*/

            /*margin: 5px;*/
            /*float: left;*/

            /*padding: 8px;*/
            /*margin: 15px;*/

            /*right: 0px;*/
            /*bottom: 0px;*/
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }


        ::-webkit-scrollbar { /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
            width: 5px;
        }

        ::-webkit-scrollbar-thumb { /*定义滑块 内阴影+圆角*/
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: #AAA;
        }

        ::-webkit-scrollbar-track { /*定义滚动条轨道 内阴影+圆角*/
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            background-color: #FFF;
        }

        .cc {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            position: absolute;
            opacity: .5;
        }

        .red {
            background-color: red;
            transform: translateX(50%);
            z-index: 1000;
        }

        .green {
            background-color: green;
            transform: translate(25%, 50%);
            z-index: 1001;
        }

        .blue {
            background-color: blue;
            z-index: -1;
        }

        .box .bar {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: rgba(255, 255, 255, 0.51);
            text-align: center;
            position: absolute;
            bottom: -50px;
            transition: all .3s ease-in 0s;
        }
        

        .box:hover > .bar {
            bottom: 0px;
        }
    </style>
</head>

<body>
<div class="cc red"></div>
<div class="cc green"></div>
<div class="cc blue"></div>


<div class="box">
    <div class="bar">系统提示</div>
</div>

</body>
</html>
